<!--  -->
<template>
    <section class='view-page'>
        <div class="page-hero">
            <div class="page-hero__image">
                <img src="../../assets/images/bounty/product/product.jpg" alt="">
            </div>
            <!-- <div class="page-hero-gradient_gradient"></div> -->
            <div class="page-hero__content container__tight">
                <h2 class="super-heading"></h2>
                <!-- <h1 class="page-hero__title w-0-only text-left font-extrabold text-2xl">
                    All Products
                </h1>
                <div class="page-hero__text rte__paragraphs w-0-only font-medium text-base text-left">
                    Browse our categories below to narrow your search
                </div> -->
            </div>
        </div>
        <div class="all-product-list">
            <div class="products-grid">
                <div v-for="category in productCategories" :key="category.id" class="product-category">
                    <div class="product-category__content">
                        <h2 class="product-category__title">{{ category.name }}</h2>
                    </div>
                    <div class="product-category__products">
                        <productList :showCategory="false" :categoryDetail="category" :showFilter="false"
                            :productList="category.products" :show-load-more="false" />
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
import { selectProductCategoryWithProducts } from '../../config/api.js';
import productList from '../product-list/index';
export default {
    components: {
        productList
    },
    data() {
        return {
            productCategories: []
        };
    },
    created() {
        selectProductCategoryWithProducts().then(res => {
            this.productCategories = res.data;
        })
    },
    methods: {

    },
}
</script>
<style scoped lang="less">
.view-page {
    background: #ffffff;
    width: 100%;
}

.page-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(100vw / 3);
}

.page-hero .page-hero__image {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.page-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.page-hero-gradient_gradient {
    background: linear-gradient(90deg, rgba(39, 70, 58, 1), rgba(52, 119, 63, 0) 100%);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 75%;
}

.page-hero__content {
    z-index: 1;
    padding-top: 80px;
    padding-bottom: 80px;
    // width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


@media (min-width: 1400px) {

    .container {
        max-width: 1320px;
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (min-width: 1200px) {

    .container {
        max-width: 1140px;
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (min-width: 992px) {

    .container {
        max-width: 960px;
        padding-left: 20px;
        padding-right: 20px;
    }
}

.container__tight {
    position: absolute;
    top: 120px;
    right: 420px;
}

.page-hero__title {
    color: #ffb854;
    font-size: 4rem;
    line-height: 3.4375rem;
}

.page-hero__text {
    color: #ffffff;
    margin-top: 30px;
    font-size: 2rem;
    line-height: 1.35563rem;
}

.all-product-list {
    width: 100%;
    margin-top: 30px;
}


@media (min-width: 1680px) {
    .products-grid {
        max-width: 1680px;
        padding-left: 60px;
        padding-right: 60px;
    }
}

@media (min-width: 1400px) {
    .products-grid {
        max-width: 1320px;
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (min-width: 768px) {
    .products-grid {
        max-width: 1140px;
        padding-left: 30px;
        padding-right: 30px;
    }

    .product-category__title {
        font-size: 40px !important;
    }
}


.products-grid {
    padding-left: 20px;
    padding-right: 20px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.product-category {
    padding-bottom: 40px;
}

.product-category__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;

    h2 {
        font-weight: 700;
        font-size: 28px;
        line-height: 50px;
        letter-spacing: -.015em;
        color: #000;
    }
}
</style>